<template>
	<view class="box">
		<view class="none" v-if="!list.length">
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/order/icon_199@2x.png" mode=""></image>
			</view>
			<view class="none-name c666">暂时没有任何订单哦~</view>
			<view class="none-btn" @click="goShare">分享二维码</view>
		</view>
		<view class="list" v-else>
			<view class="card" v-for="(item,index) of list" :key="index">
				<view class="one fw-bt">
					<view class="one1 f-w">
						<view class="img f-w">
							<image :src="item.user.avatar" mode=""></image>
						</view>
						<view class="f26 hide-line">{{item.user.nickname}}</view>
					</view>
					<view class="one2 f-w">
						<view class="f22">奖金</view>
						<view class="red bold f30">{{item.status>=2?'+':''}} {{item.brokerage}}</view>
					</view>
				</view>
				<view class="two flex" v-for="(item2,index2) in item.SimpleProductInfo" :key='index2'>
					<view class="img f-w">
						<image :src="item2.cart_info.product.image" mode=""></image>
					</view>
					<view class="right">
						<view class="r1 fw-bt">
							<view class="title hide-line f26">{{item2.cart_info.product.store_name}}</view>
							<view class="price f24 c666">￥{{item2.cart_info.product.price}}</view>
						</view>
						<view class="r2 f24 c666">x{{item2.refund_num}}</view>
					</view>
				</view>

				
				
				<view class="three f22 c999 fw-bt">
					<view>下单时间：{{item.create_time}}</view>
					<!-- <view class="f-w">
						<view class="f22">拉新金额</view>
						<view class="red bold f30">+{{item.num}}</view>
					</view> -->
				</view>
				<view class="four f22 c999">订单编号：{{item.order_sn}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [], //
			}
		},
		onLoad() {
			this.getlist(this.page)
		},
		onReachBottom() {
			this.getlist(this.page + 1)
		},
		methods: {
			getlist(e) {
				this.$request(`user/spread_order?page=${e}&limit=10`, {}, 'GET').then(res => { 
					if (res.status == 200) {
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}
					}
				})

			},
			// 分享二维码
			goShare() {
				uni.navigateTo({
					url:"code"
				})
				console.log('分享二维码');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.none {
			text-align: center;

			.none-img {
				margin: 95rpx auto 80rpx;
				width: 306rpx;
				height: 352rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.none-desc {
				margin-top: 20rpx;
			}

			.none-btn {
				margin: 70rpx auto 0;
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}

		.list {
			min-height: 100vh;
			background-color: #F5F5F5;
			overflow: hidden;
			padding: 0 30rpx;

			.card {
				margin-top: 20rpx;
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				.one {
					.one1 {
						.img {
							margin-right: 16rpx;
							width: 50rpx;
							height: 50rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.f26 {
							width: 250rpx;
						}
					}

					.one2 {
						.red {
							margin-left: 10rpx;
						}
					}
				}

				.two {
					margin: 19rpx auto;
					padding: 10rpx;
					background: #F5F5F5;
					border-radius: 10rpx;

					.img {
						width: 80rpx;
						height: 80rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}

					.right {
						margin-left: 14rpx;
						flex: 1;

						.title {
							width: 250rpx;
						}

						.r2 {
							margin-top: 12rpx;
						}
					}
				}

				.three {
					.red {
						margin-left: 10rpx;
					}
				}

				.four {
					margin-top: 15rpx;
				}
			}
		}
	}
</style>
